<template>
  <div class="proposal">
    <section>
      <h2 class="volunteer-title">
        <span>合理化建议</span>
        <ul>
          <li>开始检查</li>
        </ul>
      </h2>
      <div class="proposal-score">
        <span>68</span>
      </div>
      <div class="proposal-result">
        <ul>
          <li>
            <h6>大学</h6>
            <b>4</b>
            <span>项可优化</span>
          </li>
          <li>
            <h6>专业</h6>
            <b>2</b>
            <span>项可优化</span>
          </li>
        </ul>
        <p>合理化检查项</p>
      </div>
    </section>

    <section class="proposal-content">
      <h2 class="volunteer-title">大学</h2>
      <dl>
        <dt>
          <span>是否有保底学校</span>
          <p>录取率≥98%</p>
          <i class="icon icon-gou"></i>
        </dt>
        <dd>
          <span>没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加</span>
          <em>去添加</em>
        </dd>
      </dl>
      <dl>
        <dt>
          <span>是否有保底学校</span>
          <p>录取率≥98%</p>
          <i class="icon icon-gou"></i>
        </dt>
        <dd>
          <span>没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加</span>
          <em>去添加</em>
        </dd>
      </dl>
      <dl>
        <dt>
          <span>是否有保底学校</span>
          <p>录取率≥98%</p>
          <i class="icon icon-gou"></i>
        </dt>
        <dd>
          <span>没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加</span>
          <em>去添加</em>
        </dd>
      </dl>
    </section>

    <section class="proposal-content">
      <h2 class="volunteer-title">专业</h2>
      <dl>
        <dt>
          <span>是否有保底学校</span>
          <p>录取率≥98%</p>
          <i class="icon icon-gou"></i>
        </dt>
        <dd>
          <span>没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加</span>
          <em>去添加</em>
        </dd>
      </dl>
      <dl>
        <dt>
          <span>是否有保底学校</span>
          <p>录取率≥98%</p>
          <i class="icon icon-gou"></i>
        </dt>
        <dd>
          <span>没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加</span>
          <em>去添加</em>
        </dd>
      </dl>
      <dl>
        <dt>
          <span>是否有保底学校</span>
          <p>录取率≥98%</p>
          <i class="icon icon-gou"></i>
        </dt>
        <dd>
          <span>没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加没有保底学校，建议添加</span>
          <em>去添加</em>
        </dd>
      </dl>
    </section>
  </div>
</template>
<script>
import { api } from '@/utils'
export default {
  created () {
    // this.getData()
  },
  methods: {
    getData () {
      console.log('进入 1')
      this.$axios.get(api.getReasonableAnalysis, { params: { batchId: 1001 } }).then(data => {
        console.log('进入', data)
      }).catch(data => {

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.proposal{
  // padding:0 10px;
  width:375px;
  >section{
    padding:0 10px;
    background:$light;
    margin-bottom:12px;
  }
  &-score{
    padding:25px;
    display: flex;
    justify-content:center;
    span{
      display:flex;
      align-items:center;
      justify-content:center;
      width:130px; height:130px;
      border-radius:130px;
      background:$table-y;
      line-height:1.0;
      font-size:72px;
      color:$light;
    }
  }
  &-result{
    >ul{
      display:flex;
      justify-content:space-between;
      border-radius:10px;
      overflow:hidden;
      >li{
        width:49%;
        padding:12px 10px;
        background:$gray-bg;
        display: flex;
        flex-direction: column;
        align-items:center;
        color:#69707F;
        h6{
          font-size:18px;
        }
        b{
          font-size:36px;
          color:$table-y;
          height:50px; line-height: 50px;
        }
        span{
          font-size:$default-size;
        }
      }
    }
    >p{
      text-align: center;
      color:#69707F;
      font-size:18px;
      padding:20px 0;
    }
  }

  &-content{
    padding-bottom:10px !important;
    dl{
      dt{
        display:flex;
        align-items:center;
        padding:15px 10px;
        border-bottom:1px solid #E6E6E6;
        span{
          color:#333;
          font-size:16px;
        }
        p{
          color:$stable-ad;
          font-size:$default-size;
          padding-left:10px
        }
        i{
          margin-left:auto;
        }
      }
      dd{
        display:flex;
        align-items:center;
        font-size:$default-size;
        line-height:1.4;
        padding:15px 10px;
        border-bottom:1px solid #E6E6E6;
        span{
          flex:1; overflow:hidden;
          color:$table-y;
        }
        em{
          color:$positive;
        }
      }
    }
  }
}
</style>
